<template>
  <div class="news-view">
    <loading :show="loading" />
    <arrow />
    <v-title :title="detail.title" :is-center="false" />
    <div class="view">
      <div class="date">发布时间: {{ detail.create_time }}</div>
      <div class="text" v-html="detail.inText"></div>
      <ul class="images" v-if="detail.inImages && detail.inImages.length > 0">
        <li
          v-for="(item, index) in detail.inImages"
          :key="index"
        >
          <div class="image">
            <img v-lazy="item" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title'
import Arrow from '@/components/Arrow'
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
import scroll from '@/util/scroll'
export default {
  name: 'NewsView',
  components: {
    'v-title': Title,
    Arrow,
    Loading,
  },
  data() {
    return {
      loading: false,
      detail: {
        title: this.$route.meta.title || ''
      }
    }
  },
  methods: {
    fetch() {
      this.loading = true
      api.News.view({ id: this.$route.params.id }).then(response => {
        let { data } = response
        data = base64.parse(data)
        Object.assign(this.detail, { ...data })
      }).finally(() => {
        this.loading = false
      })
    }
  },
  activated () {
    this.fetch()
    scroll.toTop()
  }
}
</script>

<style scoped lang="stylus">
.news-view
  padding-top 45px
  padding-bottom 20px
  .view
    margin 10px
    padding 10px
    background white
    border-radius 10px
    .date
      color #ccc
      height 30px
      line-height 30px
    .text
      margin 15px 0
</style>
